<!-- 2020年2月17日18:18:53 完成 -->
<template>
  <view>
    <view class="edgeInsetTop"></view>
    <view class="cu-form-group" v-show="addressType">
      <view class="title">联系人</view>
      <input type="text" placeholder="姓名" v-model="addressData.name" />
    </view>
    <view class="cu-form-group" v-show="addressType">
      <view class="title">手机号</view>
      <input type="number" placeholder="手机号码" maxlength="11" v-model="addressData.mobile" />
    </view>
    <view class="cu-form-group">
      <view class="title">所在地区</view>
      <input type="text" @tap="btnClick" :value="addressData.formatted_address" placeholder="选择地区" disabled />
    </view>
    <view class="cu-form-group align-start">
      <view class="title">详细地址</view>
      <textarea
        maxlength="-1"
        @input="onInput"
        @focus="focusInputtips"
        @confirm="confirmInputtips"
        @blur="blurInputtips"
        :placeholder-style="addressData.adcode == '' ? 'color: #bbb' : ''"
        :adjust-position="false"
        :value="addressData.address ? addressData.address : ''"
        :disabled="addressData.adcode == ''"
        :placeholder="
          addressData.adcode == '' ? '还没有选择地区哦~ 选择地区后完成此项' : '支持智能联想，输入小区名试试~'
        "
      ></textarea>
    </view>
    <view class="cu-form-group margin-top-bj" v-show="addressType">
      <view class="title">设为默认</view>
      <switch
        @change="switchChange"
        :class="addressData.default == 1 ? 'checked' : ''"
        :checked="addressData.default == 1"
      ></switch>
    </view>
    <!-- 1.0.5升级 -->
    <!-- 1.0.6升级 -->
    <view class="padding-bj flex flex-direction margin-top" v-show="addressType">
      <button @tap="confirm" class="cu-btn wanl-bg-orange lg">完成</button>
    </view>
    <wanl-address ref="wanlAddress" @selectAddress="successSelectAddress"></wanl-address>
  </view>
</template>

<script>
export default {
  data() {
    return {
      addressData: {
        name: '',
        mobile: '',
        default: 0,
        //地区
        country: '', // 国家
        province: '', //省份
        city: '', // 城市
        citycode: '', // 城市代码
        district: '', // 县
        adcode: '', // 地区代码
        formatted_address: '', //详细地区
        //详情
        address: '', //详细地址
        location: '', //经纬度
      },
      addressList: {
        location: '',
        adcode: '',
        tips: {},
      },
      addressType: true,
    };
  },
  onLoad(option) {
    let title = '新增地址 ';
    if (option.type === 'newadd') {
      this.addressData.default = 1;
    }
    if (option.type === 'edit') {
      title = '编辑地址';
      this.addressData = JSON.parse(option.data);
    }
    this.manageType = option.type;
    this.$wanlshop.title(title);
  },
  onNavigationBarButtonTap() {
    this.confirm();
  },
  methods: {
    switchChange(e) {
      if (e.detail.value) {
        this.addressData.default = 1;
      } else {
        this.addressData.default = 0;
      }
    },
    btnClick() {
      this.$refs.wanlAddress.show();
    },
    successSelectAddress(address) {
      this.addressData.country = address.country;
      this.addressData.province = address.province;
      this.addressData.city = address.city;
      this.addressData.citycode = address.citycode;
      this.addressData.district = address.district;
      this.addressData.formatted_address = address.formatted_address;
      this.addressData.location = address.location;
      this.addressData.adcode = address.adcode;
      this.addressList.location = address.location;
      this.addressList.adcode = address.adcode;
    },
    onInput(event) {
      this.addressData.address = event.detail.value;
    },
    // 详细地址失去焦点
    blurInputtips(event) {
      this.addressData.address = event.detail.value;
      setTimeout(() => {
        this.addressType = true;
      }, 10);
    },
    // 详细地址已完成
    confirmInputtips(event) {
      this.addressType = true;
    },
    // 详细地址获取焦点
    focusInputtips(event) {
      this.addressType = false;
    },
    // 详细地址替换
    addressTisp(data) {
      this.addressData.adcode = data.adcode;
      this.addressData.address = data.address;
      this.addressData.location = data.location;
      this.addressType = true;
    },
    //提交
    confirm() {
      let data = this.addressData;
      if (!data.name) {
        this.$wanlshop.msg('请填写收货人姓名');
        return;
      }
      if (!/^1[0-9]{10,10}$/.test(data.mobile)) {
        // 1.0.2升级
        this.$wanlshop.msg('请输入正确的手机号码');
        return;
      }
      if (!data.city) {
        this.$wanlshop.msg('请选择地区');
        return;
      }
      if (!data.address) {
        this.$wanlshop.msg('请填写详细信息');
        return;
      }
      this.$wanlshop.prePage().refreshList(data, this.manageType);
      this.$wanlshop.msg(`地址${this.manageType == 'edit' ? '修改' : '添加'}成功`);
      this.$wanlshop.back(1);
    },
  },
};
</script>

<style>
.cu-form-group {
  padding: 0 25rpx;
}

.cu-form-group .title {
  min-width: calc(4em + 15px);
  font-size: 26rpx;
}

.cu-form-group input,
.cu-form-group textarea {
  font-size: 26rpx;
}

.cu-btn.lg {
  font-size: 32rpx;
  height: 86rpx;
}

.tipsScroll {
  width: 100%;
  height: 500rpx;
  padding: 0 50rpx;
}

.tipsScroll .item {
  margin: 25rpx 0;
}

.tipsScroll .item view {
  color: #b8b8b8;
  font-size: 22rpx;
}

.tipsScroll .item text {
  color: #333;
}
</style>
